<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item,index) in breadList" :key="index" :class="breadList.length===1?'have-one':''" :to="{'path':item.path}">{{ item.name }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'BreadCrumb',
  setup() {
    const store = useStore()
    const breadList = computed(() => {
      return store.getters.breadList
    })
    return {
      breadList
    }
  }
})
</script>

<style scoped lang="scss">
:deep .have-one{
    .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
      font-weight: 700!important;
      color:#303133!important;
    }
  }
  span{
    cursor: pointer;
  }
</style>
